<template>
    <!-- 商店管理 -->
    <div class=" height-percent-100">
        <el-breadcrumb class="page-position">
            <!-- <el-breadcrumb-item>首页</el-breadcrumb-item> -->
            <el-breadcrumb-item><a href="javascript:;">商品管理</a></el-breadcrumb-item>
        </el-breadcrumb>

        <div class="model-info">
            <el-form label-width="140px">
                <el-form-item label="机器人名称">
                    <el-input v-model="itemInfo.rpaRobotName" disabled placeholder="请输入" />
                </el-form-item>
                <el-form-item label="开发者名字">
                    <el-input v-model="itemInfo.developerName" disabled placeholder="请输入" />
                </el-form-item>
                <el-form-item label="版本号">
                    <el-input v-model="itemInfo.version" disabled placeholder="请输入" />
                </el-form-item>
                <el-form-item label="类型">
                    <el-select class="width-percent-100" disabled filterable clearable v-model="itemInfo.type"
                        placeholder="请选择">
                        <el-option v-for="item in typeSelect" :key="item.value" :label="item.title"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="itemInfo.content" disabled placeholder="请输入" />
                </el-form-item>
                <!-- 上传截图 -->
                <el-form-item label="截图">
                    <!-- <el-upload class="upload-box" :show-file-list="false" name="pic" :action="uploadUrl1" accept=".jpg,.png"
              :headers="headers" :onSuccess="uploadSuccess" :onError="uploadError">
              <img src="../../assets/image/add-img.png" class="img-item" />
            </el-upload> -->
                    <div class="img-item" v-for="item in imgList" :key="item">
                        <!-- <div class="del-btn active-style" @click="deleteImg(index)">×</div> -->
                        <img :src="serverUrl + item" class="img-item" />
                    </div>
                </el-form-item>
                <!-- 上传.ibt文件 -->
                <el-form-item label=".ibt文件" v-if="itemInfo.rpaRobotName">
                    <el-upload class="upload-box" :show-file-list="false" name="file"
                        :data="{ fileName: itemInfo.rpaRobotName }" :action="uploadUrl2" accept=".ibt"
                        :headers="headers" :onSuccess="uploadSuccess2" :onError="uploadError">
                        <el-button size="small" v-if="itemInfo.rpaFileAddress == ''">点击上传文件</el-button>
                        <span v-if="itemInfo.rpaFileAddress" class="orange-color">{{ itemInfo.rpaFileAddress
                        }}</span>
                    </el-upload>
                </el-form-item>
                <!-- 上传视频文件 -->
                <el-form-item label="视频文件" v-if="itemInfo.rpaRobotName">

                    <video width="500" height="400" autoplay controls preload="metadata">
                        <!-- 添加视频源 -->
                        <source :src="serverUrl + itemInfo.videoAddress" type="video/mp4">
                        <source :src="serverUrl + itemInfo.videoAddress" type="video/webm">

                        <!-- 如果浏览器不支持 video 标签则显示的文字 -->
                        <p>抱歉，您的浏览器不支持 HTML5 视频播放。</p>
                    </video>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>
<script>
import {
    serverUrl, saveRpacontroller, pageSize, deleteRpa, removeIbtFun, removeImgFun,
    getSelectByType, removeUserInfo, getRpaInfo, unlockAccount
} from '@/assets/api/api.js';
import '@/assets/css/tabs.css';
export default {
    data() {
        return {
            serverUrl,
            id: '',
            imgList: [],
            itemInfo: {
                rpaRobotName: '',
                version: '',
                developerName: '',
                screenShotAddress: '',
                rpaFileAddress: '',
                videoAddress: '',
                content: '',
                type: '',
            },

        };
    },
    methods: {
        getItemInfo() {
            getRpaInfo({ id: this.id })
                .then((res) => {
                    if (res.code == 0) {
                        this.itemInfo = res.data
                        this.imgList = res.data.screenShotAddress.split(',')

                    }
                })
                .catch((err) => { });
        },

    },
    mounted() {
        this.id = this.$route.params.id
        this.getItemInfo()
    },
};
</script>
<style scoped>
.img-item {
    width: 80px;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 0 10px 10px 0;
    position: relative;
}

.img-item img {
    width: 100%;
    height: 100%;
}
</style>